<template>
  <el-dialog
    title="银行配置管理"
    :visible.sync="dialogVisible"
    width="70%"
    :modal="false"
    :before-close="handleClose"
  >
    <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">添加</el-button>
    <el-table class="mt10" v-loading="loading" :data="dealList" border stripe>
      <el-table-column label="银行" align="center">
        <template #default="scope">
          <el-input v-if="scope.row.editable" v-model="scope.row.bankName"></el-input>
          <span v-else>{{ scope.row.bankName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" align="center">
        <template #default="scope">
          <el-input v-if="scope.row.editable" v-model="scope.row.bankAccount"></el-input>
          <span v-else>{{ scope.row.bankAccount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账户单位" align="center">
        <template #default="scope">
          <el-input v-if="scope.row.editable" v-model="scope.row.accountOrg"></el-input>
          <span v-else>{{ scope.row.accountOrg }}</span>
        </template>
      </el-table-column>
      <el-table-column label="定期活期" align="center" min-width="50">
        <template #default="scope">
          <el-select
            v-if="scope.row.editable"
            style="width: 90%"
            v-model="scope.row.accountType"
          >
            <el-option
              label="定期"
              value="定期"
            />
            <el-option
              label="活期"
              value="活期"
            />
          </el-select>
          <span v-else>{{ scope.row.accountType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            type="success"
            v-if="scope.row.editable"
            size="mini"
            icon="el-icon-check"
            @click="handleInsertOrUpdate(scope)"
          >提交
          </el-button>
          <el-button
            type="primary"
            v-else size="mini"
            icon="el-icon-edit"
            @click="handleChange(scope)"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { bankConfigDelete, bankConfigInsertOrUpdate, getDisposalBankConfigList } from '@/api/sacw/dispose'

export default {
  name: 'bankConfig',
  data() {
    return {
      dialogVisible: false,
      dealList: [],
      loading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.$emit('refurbish')
    },
    handleAdd() {
      this.dealList.splice(0, 0, { editable: true })
    },
    handleInsertOrUpdate(scope) {
      bankConfigInsertOrUpdate(scope.row).then(() => {
        this.getList()
      })
    },
    handleChange(scope) {
      this.$set(this.dealList[scope.$index], 'editable', true)
    },
    handleDelete(scope) {
      if (scope.row.id) {
        bankConfigDelete(scope.row.id).then(() => {
          this.getList()
        })
      } else {
        this.dealList.splice(scope.$index, 1)
      }
    },
    getList() {
      this.loading = true
      getDisposalBankConfigList().then(res => {
        this.dealList = res.data
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
